import React, { useState } from 'react'
import type { ChangeEvent } from 'react'
// import List1 from './demos/List1'
// import StateDemo from './demos/StateDemo'
// import StateDemo2 from './demos/StateDemo2'
import List2 from './demos/List2'
import ImmerDemo from './demos/ImmerDemo'
import UseRefDemo from './demos/UseRefDemo'
import UseMemoDemo from './demos/UseMemoDemo'
import UseCallbackDemo from './demos/UseCallbackDemo'
// import useTitle from './hooks/useTitle'
// import useMouse from './hooks/useMouse'
import useGetInfo from './hooks/useGetInfo'
import { useTitle } from 'ahooks'
import StyledComponentsDemo from './demos/StyledComponentsDemo'
import FormElementDemo from './demos/FormElementDemo'
function App() {
  useTitle('App Page2')
  // const { x, y } = useMouse()
  const { loading, info } = useGetInfo()
  const [textVal, setTextVal] = useState<string>('hello')

  function handleChange(e: ChangeEvent<HTMLInputElement>) {
    setTextVal(e.target.value)
  }
  return (
    <>
      {/* <List1 /> */}
      {/* <StateDemo /> */}
      {/* {<StateDemo2 />} */}
      <List2 />
      <ImmerDemo />
      <UseRefDemo />
      <UseMemoDemo />
      <UseCallbackDemo />
      <div>
        {/* x:{x} */}
        {/* y:{y} */}
      </div>
      <p>{loading ? '加载中....' : info}</p>

      <StyledComponentsDemo />

      <FormElementDemo />
    </>
  )
}

export default App
